<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>实时区角-学生点评</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody" ref="dialogBox">
        <div class="corner-a" :style="{height: boxHeight+'px'}">
          <div class="corner-student">
            <div class="corner-student-list" v-for="item in new_studentList" :key="item.student_id"
                 :style="{width: div_box_width+'px'}">
              <div class="corner-student-list-in" :style="{width: img_width+'px'}"
                   @click="getStudentFn(item.student_id)">
                <div class="corner-student-list-postion"
                     :style="{height: (img_height+22)+'px',width: (img_width+2)+'px'}">
                  <div class="corner-student-list-img">
                    <div class="student-img-box"
                         :style="{background: 'url('+item.pic+')',backgroundRepeat: 'no-repeat',backgroundSize:'cover',backgroundPosition:'center', height: img_height+'px',width: img_width+'px'}">
                    </div>
                    <!-- in-color正常 lose-color失约 leave-coloe离去 not-color未预约-->
                    <!-- // 0离去1在线2未约3失约 getStudentStatus-->
                    <div class="student-status-title"
                         :class="item.cornerStatus==3?'lose-color':(item.cornerStatus==0?'leave-color':(item.cornerStatus==1?'in-color':''))">
                      <span v-if="item.cornerStatus==1">正常</span>
                      <span v-if="item.cornerStatus==3">失约</span>
                      <span v-if="item.cornerStatus==0">离去</span>
                    </div>
                  </div>
                  <div class="corner-student-list-evaluate"
                       :style="{height: (img_height+22)+'px',width: (img_width+2)+'px'}"
                       v-show="checkStudent.indexOf(item.student_id)!==-1">
                    <div class="corner-list-icon">
                      <i class="iconfont iconqueren-zhengque"></i>
                    </div>
                  </div>
                </div>
                <div class="corner-student-list-name">
                  <p>{{ item.student.name }}</p>
                  <p>{{ item.classes.class_name }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="corner-content-box">
            <div class="form-linebox mb-10" v-if="commontType==1">
              <span class="form-linebox-left">点评图片:</span>
              <div class="form-linebox-right">
                <el-upload
                    class="addicon"
                    accept="image/png, image/jpeg"
                    list-type="picture-card"
                    :action="$uploadImg"
                    :file-list="fileList"
                    :limit="9"
                    :on-success="handleSuccess"
                    :on-remove="handleRemove"
                    :before-upload="beforeAvatarUpload">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </div>
            <div class="form-linebox mb-10" v-if="commontType==2">
              <span class="form-linebox-left">点评视频:</span>
              <div class="form-linebox-right">
                <el-upload
                    class="addicon"
                    :action="$uploadImg"
                    :show-file-list="false"
                    :file-list="videofileList"
                    accept=".mp4"
                    :limit="1"
                    :on-success="handlevideoSuccess"
                    :before-upload="beforevideoUpload"
                    :on-progress="handprogress"
                >
                  <div v-if="vedioOption!==''">
                    <video :src="vedioOption"
                           class="avatar"
                           style="background: #000"
                           controls="controls"
                    >您的浏览器不支持视频播放
                    </video>
                    <span class="detelBox" @click.stop="handlevideoRemove">删除</span>
                  </div>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <div
                      slot="tip"
                      class="el-upload__tip"
                  >介绍视频记录生活，最多上传一个（仅支持50M以内）
                  </div>
                </el-upload>
                <el-progress :percentage="percentage" v-show="percentageStatus"></el-progress>
              </div>
            </div>
            <div class="form-linebox mb-10">
              <span class="form-linebox-left">点评内容:</span>
              <div class="form-linebox-right">
                <el-input v-model="contentTxt" auto-complete="off" placeholder="填写该生点评" type="textarea"></el-input>
              </div>
            </div>
            <div class="form-linebox">
              <span class="form-linebox-left">采集标签:</span>
              <div class="form-linebox-right">
                <v-selectpage :data="selectTipslist" key-field="id" show-field="name" class="form-control"
                              :multiple="true"
                              v-model="tag_ids" laceholder="选择采集标签" title="选择采集标签"></v-selectpage>
                <p style="margin-top:5px;font-size: 12px;color:#999;">标签对应采集类型，标签可不选择</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">取消</el-button>
        <el-button type="primary" @click="savePointFn" size="small">确定并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import field from '@/assets/imageAdmin/field.jpg'

export default {
  props: ['visible', 'studentList', 'activeDetail', 'cornerDetail', 'studentId', 'commontType'],
  components: {},
  data() {
    return {
      dialogVisible: false,
      field: field,
      boxHeight: 0,
      div_box_width: 0,
      img_height: 0,
      img_width: 0,
      checkStudent: [],
      new_studentList: [],
      fileList: [],
      videofileList: [],
      vedioOption: '',
      percentage: 0,
      uploadPic: [],
      contentTxt: '',
      selectTipslist: [],
      tag_ids: '',
      percentageStatus: false
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        let n = this;
        for (let item of this.studentList) {
          let list = this.getJson(item)
          list.cornerStatus = this.getStudentStatus(list.student_id);
          this.new_studentList.push(list);
        }
        console.log('studentId:', this.studentId)
        if (this.studentId) {
          this.checkStudent.push(this.studentId)
        }
        this.getPointFn()
        this.$nextTick(() => {
          n.boxHeight = n.$refs.dialogBox.offsetHeight;
          n.boxWidth = n.$refs.dialogBox.offsetWidth; // 计算单个宽度 一排 8 个
          n.div_box_width = (n.boxWidth - 20) / 14; // 一寸照片 413*295
          // 单张的宽度 n.div_box_width*.9
          let a_width = n.div_box_width * .8;
          // img_height: 0,
          n.img_width = n.div_box_width * .8
          if (a_width < 295) {
            n.img_height = (a_width / 295) * 413
          }
          if (a_width === 295) {
            n.img_height = 413
          }
          if (a_width > 295) {
            n.img_height = (295 / a_width) * 413
          }
        })
      } else {
        this.new_studentList = []
        this.checkStudent = []
      }
    }
  },
  created() {

  },
  methods: {
    // 初始化
    async InitFn() {
      console.log('页面请求的数据内容：', this.cornerOption)
      let option = {
        p: this.page.pageindex,
        class_id: this.cornerOption.class.id,
        corner_id: this.cornerOption.corner.id
      }
      let data = await this.$post(this.api.admin_corner_apply_list, option);
      console.log('data:', data)
      this.arryList = data.list.data
      this.page.total = data.list.total
    },
    // 标签
    async getPointFn() {
      let data = await this.$fetch(this.api.corner.comment.tagsIndex, {});
      if (!data.code) {
        this.selectTipslist = data.list.data
      }
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    // 判断获取学生状态
    getStudentStatus(id) {
      console.log('this.activeDetail:', this.activeDetail)
      console.log('this.id:', id)
      // 0离去1在线2未约3失约
      // activeDetail: {
      //   0: {},
      //   1: {},
      //   2: {},
      //   3: {}
      // }, // 重组区角数据内容 0离去1在线2未约3失约
      let status = 3 // 一开始未到都算失约
      for (let index in this.activeDetail) {
        if (this.activeDetail[index][id]) {
          status = index
        }
      }
      return status
    },
    getStudentFn(id) {
      if (this.checkStudent.indexOf(id) === -1) {
        this.checkStudent.push(id)
      } else {
        this.checkStudent.splice(this.checkStudent.indexOf(id), 1)
      }
    },
    getFraction(index, id) {
      let option = this.getJson(this.fraction[index])
      option.pointVal = id
      this.$set(this.fraction, index, option)
    },
    // 提交评价
    async savePointFn() {
      console.log('this.fraction:', this.fraction)
      console.log('checkStudent:', this.checkStudent)
      // corner_id: 33
      // student_id: 687,688
      // content: 很不错的
      // pic: /uploads/20211106/cda45b86e55f1da29ddf9f65ab572e31.jpg
      // video: /uploads/20211106/b6bee4cb5818adb298f1967336566a92.mp4
      // tag_ids:
      if (!this.checkStudent.length) {
        this.$message.error('请选择点评学生')
        return
      }
      // type 1 图文采集 2 视频采集
      if (this.savePointFn === 1) {
        this.$message.error('上传图片')
        return
      }
      if (this.savePointFn === 2) {
        this.$message.error('上传视频')
        return
      }
      // if(!this.vedioOption && !this.uploadPic.length){
      //   this.$message.error('图片/视频至少选择一项上传')
      //   return
      // }
      let optionData = {
        corner_id: this.cornerDetail.corner_id,
        student_id: this.checkStudent.join(','),
        content: this.contentTxt,
        pic: this.uploadPic.join(','),
        video: this.vedioOption,
        tag_ids: this.tag_ids
      }
      let data = await this.$post(this.api.corner.studentcomment.add, optionData);
      if (!data.code) {
        this.checkStudent = [];
        this.contentTxt = '';
        this.vedioOption = '';
        this.uploadPic = []
        this.$message.success('提交成功！')
      } else {
        this.$message.error('提交失败！')
      }
    },
    handlevideoSuccess(res, file) {
      if (res.code === 0) {
        this.vedioOption = res.data.name
        this.percentageStatus = false;
        this.percentage = 0;
      }
    },
    handleRemove(file, fileList) {
      let index_ = this.uploadPic.indexOf(file.response.data.name)
      this.uploadPic.splice(index_, 1)
    },
    handlevideoRemove() {
      this.vedioOption = ''
      this.videofileList = []
    },
    beforevideoUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 50
      if (['video/mp4'].indexOf(file.type) == -1) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!isLt50M) {
        this.$message.error('上传视频大小不能超过50MB哦!')
        return false
      }
      this.percentageStatus = true
    },
    handprogress(option) {
      this.percentage = parseInt(option.percent)
    },
    handleSuccess(response) {
      this.uploadPic.push(response.data.name)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
  },
  mounted() {

  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 88%;
  height: 88%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  /*padding: 0 10px;*/
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.corner-a {
}


.corner-student {
  overflow-y: auto;
  padding-left: 10px;
}

.corner-student-list {
  float: left;
  margin-bottom: 10px;
  margin-top: 10px;
}

.corner-student-list-in {
  cursor: pointer;
}

.corner-student-list-in:hover .corner-student-list-postion {
  box-shadow: 0 0 4px #1b8de5;
}

.corner-student-list-postion {
  position: relative;
  border: 1px solid #ddd;
}

.corner-student-list-img {
  position: absolute;
}


.corner-student-list-evaluate {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(46, 106, 162, 0.6);
  color: #fff;
}

.corner-list-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.corner-student-list-evaluate i {
  font-size: 34px;
  margin: 0;
}

.student-status-title {
  height: 20px;
  text-align: center;
  color: #fff;
}

.corner-student-list-name {
  text-align: center;
}

.corner-student-list-name p:first-child {
  padding-top: 5px;
  font-size: 16px;
}

.corner-student-list-name p:last-child {
  font-size: 12px;
  color: #999;
}

.in-color {
  background: #1b8de5;
}

.lose-color {
  background: #ef6f14;
}

.leave-color {
  background: #444;
}

.not-color {
  background: #e28fad;
}


.corner-content-box {
  padding: 30px;
}

.form-linebox {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.form-linebox-left {
  padding-right: 20px;
}

.form-pointTitle {
  margin: 20px 0;
  font-size: 16px;
  font-weight: bold;
  background: #f7f5f5;
  padding: 10px 5px;
}
</style>

